<template>
  <a-row>
    <a-col :span="24" style="margin-bottom: 20px">
      <a-button
        type="primary"
        style="margin-right: 21px"
        @click="visible = true"
      >
        <template #icon><PlusCircleOutlined /></template>学员批量导入</a-button
      >
      <a-button type="primary"
        ><template #icon><PlusCircleOutlined /></template>批量删除</a-button
      >
    </a-col>
    <a-col :span="24">
      <a-table :columns="columns"></a-table>
    </a-col>
  </a-row>

  <a-modal
    v-model:visible="visible"
    title="学员批量导入"
    width="680px"
    :footer="null"
    :bodyStyle="{
      padding: '30px',
    }"
    destroyOnClose
  >
    <MutpileUpload />
  </a-modal>
</template>

<script lang="ts" setup>
import { PlusCircleOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import MutpileUpload from './MutpileUpload.vue';

const columns = [
  {
    title: '序号',
  },
  {
    title: '学员名称',
  },
  {
    title: '性别',
  },
  {
    title: '手机号',
  },
  {
    title: '身份证号',
  },
  {
    title: '支付方式',
  },
  {
    title: '支付金额',
  },
  {
    title: '操作',
  },
];

const visible = ref(false);
</script>
